<template>
  <div class="page">
    <scroll-view scroll-x
                 class="bg-white nav"
                 scroll-with-animation
                 :scroll-left="scrollLeft">
      <view class="cu-item"
            :class="index==TabCur?'text-green cur':''"
            v-for="(item,index) in articles"
            :key="index"
            @tap="tabSelect"
            :data-id="index">
        {{item}}
      </view>
    </scroll-view>

    <div class="content">
      <div class="target"
           v-if="TabCur==0">
        0
      </div>
      <div class="record"
           v-else-if="TabCur==1">
        1
      </div>
      <div class="collect"
           v-else-if="TabCur==2">
        2
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      TabCur: 0,
      scrollLeft: 0,
      articles: ["目标页", "记录页", "收藏页"]
    };
  },
  onLoad: function () {

  },
  methods: {
    tabSelect (e) {
      this.TabCur = e.currentTarget.dataset.id;
      this.scrollLeft = (e.currentTarget.dataset.id - 1) * 60
    }
  }
}
</script>

<style scoped>
scroll-view {
  position: relative;
  top: -5px;
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>